<template>
  <div ref="vchart" class="vae-echarts">
    <div :id="computedId" :style="style"></div>
  </div>
</template>

<script>
export default {
  name: "vcharts",
  props: {
    id: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: ''
    },
    height: {
      type: String,
      default: ''
    },
    options: {
      type: Object,
      default() {
        return new Object();
      }
    },
    dispatchAction:{
      type: Object,
      default() {
        return  {
          show:false,
          dataIndex:0
        };
      }
    }
  },
  data() {
    return {
      chart: "",
      timer:{

      }
    }
  },

  watch: {
    options:{
      deep:true, //深度监听设置为 true
      handler:function(v){
        this.refreshChart(v)
        this.resizeChart()
      }
    },
    dispatchAction:{
      deep:true, //深度监听设置为 true
      handler:function(v){
        this.refreshChart(v)
        this.resizeChart()
      }
    },
    '$store.state.watcher.WATCHER_TAB_HASH'() {
      this.createChart()
      this.resizeChart()
    },
    '$store.state.watcher.WATCHER_LAYOUT_HASH'() {
      this.createChart()
      this.resizeChart()
    }
  },
  methods: {
    createChart() {
      // console.log(this.computedId);
      let $chart = $('#' + this.computedId);
      if (!this.chart && $chart.is(':visible')) {
        if (this.height) {
          this.chart = echarts.init(document.getElementById(this.computedId), 'vae');
          this.chart.setOption(this.options);
          if(this.dispatchAction.show){
            this.defaultSelectOne()
          };
          this.$emit('initChart', this.chart);
          this.chart.on("click",e=>{
            this.$emit("ck",e)
          })
          this.chart.on("mouseover",e=>{
            this.$emit("mouseover",e)
          })
        } else {
          console.error('请传入正确的height参数@vae-echarts');
        }
      }
    },
    //图例默认选中一块
    defaultSelectOne(){
      this.timer[this.id]=null;
      this.timer[this.id]= setTimeout(v=>{
        this.chart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: this.dispatchAction.dataIndex
        });
      },1000)
      //鼠标移入时
      this.chart.on('mouseover', (e) => {
        if (e.dataIndex !== this.dispatchAction.dataIndex) { // 当鼠标移除的时候 使默认的索引值去除默认选中
          this.chart.dispatchAction({ type: 'downplay', dataIndex: this.dispatchAction.dataIndex });
        }else {
        }
      });
      ///鼠标移出时
      this.chart.getZr().on('mouseout', ()=> {
        this.chart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: this.dispatchAction.dataIndex
        });
      });
    },

    refreshChart(options) {
      if (this.chart) {
        this.chart.clear;
        this.chart.setOption(this.options, true);
      }else{
        this.createChart();
      }
    },





    resizeChart() {
      let $chart = $('#' + this.computedId);
      if (this.chart && $chart.is(':visible')) {
        this.chart.resize({width:0,height:0})
        this.chart.resize({
          width: this.$refs.vchart.offsetWidth,
          height: this.$refs.vchart.offsetHeight
        })

      }
    }
  },
  computed: {
    computedId() {
      return this.id || 'vcharts_' + $uuid.v4();
    },
    style() {
      return {
        width: this.width || '100%',
        height: this.height || '300px'
      }
    }
  },

  mounted() {
    this.createChart()
  },
  beforeDestroy() {
    for(var key in this.timer){
      clearTimeout(this.timer[key])
      this.timer[key]=null;
    }
  }

}
</script>
